<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        html { width: 100%; height: 100%; background: #242424; font-family: 'Arial'; }
        body { width: 100%; height: 100%; display: -webkit-flex; display: flex; }
        .ht_date { width: 500px; height: 100px; margin: auto; text-align: center; }
        .ht_date:after { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
        .ht_date span { font-size: 30px; color: #fff; display: inline-block; vertical-align: middle; }
    </style>
</head>

<body>
    <div class="ht_date">
        <span id="date">2017年08月01日</span>
        <span id="week">星期二</span>
        <span id="time">15:00</span>
    </div>

    <script>
    window.onload = function () {
        startTime();
    }

    function startTime() {
        var today = new Date()

        var y  = today.getFullYear();
        var mo = today.getMonth() + 1;
        var d  = today.getDate();
        var h  = today.getHours();
        var mi = today.getMinutes();
        var s  = today.getSeconds();

        var weekday = new Array(7)
        weekday[0] = "星期日"
        weekday[1] = "星期一"
        weekday[2] = "星期二"
        weekday[3] = "星期三"
        weekday[4] = "星期四"
        weekday[5] = "星期五"
        weekday[6] = "星期六"

        mi = checkTime(mi);
        s = checkTime(s);
        document.getElementById('date').innerHTML = y + "年" + mo + "月" + d + "日";
        document.getElementById('week').innerHTML = weekday[today.getDay()];
        document.getElementById('time').innerHTML = h + ":" + mi + ":" + s;
        setTimeout('startTime()', 500)
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i
        }
        return i
    }
    </script>
</body>

</html>